<template>
   <view class="swiper_cell"  :style="aniObj" ></view>
   <view class="classfy_cell">
        <view
            hover-class="navigator-hover"
            v-for="item of 10"
            :key="item"
            class="navigator"
        >
            <view class="img" :style="aniObj"/>
            <view class="text" :style="aniObj"></view>
        </view>
   </view>
   <view class="red"> 
        <view class="cell" v-for="item of 4" :key="item">
            <view class="title">
                <view class="main-title" :style="aniObj"></view>
                <view class="sub-title" :style="aniObj"></view>
            </view>
            <view class="nav_cell">
                <navigator  url="/pages/"   v-for="img of 2" :key="img">
                    <view class="img" :style="aniObj"/>
                </navigator>
            </view>
        </view>
   </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
let lef = ref(0)
let aniObj = ref({backgroundImage: `linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(0, 0, 0, 0.1) ${lef.value}%,
    rgba(255, 255, 255, 0) 
  )`})

onLoad(() => {
    setInterval(() => {
        lef.value += 2
        if (lef.value > 106) {
            lef.value = 0
        }
        aniObj.value = {backgroundImage: `linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(0, 0, 0, 0.1) ${lef.value}%,
            rgba(255, 255, 255, 0) 
        )`}
    }, 50)
})
</script>

<style scoped lang='scss'>

.swiper_cell {
  height: 320rpx;
  width: 100%;
  position: relative;
  margin-bottom: 20rpx;
}

.classfy_cell {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 10rpx;
    .navigator {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        margin-top: 20rpx;
         
        .img {
            width: 90rpx;
            height: 90rpx;
        }
        .text {
            height: 20rpx;
            width: 90rpx;
            margin-top: 20rpx;
        }
    }
}
.red {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 10rpx 5rpx; 
        margin-top: 30rpx;
    }
    .cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        padding: 10rpx 0;
        .title {
            display: flex;
            align-items: center;
            width: 100%;
            .main-title {
                width: 130rpx;
                height: 30rpx;
                margin-left: 32rpx;
            }
            .sub-title {
                height: 24rpx;
                width: 80rpx;
                margin-left: 6rpx;
            }
        }
        .nav_cell {
            display: flex;
            margin-top: 10rpx;
            .img {
                width: 160rpx;
                height: 160rpx;
                margin: 8rpx;
            }
        }
    }

    .cell:nth-child(1){
        border-bottom: 2rpx solid #e1d7d7;
        border-right: 2rpx solid #e1d7d7;
    }
    .cell:nth-child(2){
        border-bottom: 2rpx solid #e1d7d7;
    }
    .cell:nth-child(3){
        border-right: 2rpx solid #e1d7d7;
    }
</style>
